<template>
    <view class="mask" v-if="showFilter">
        <view class="content">
            <view class="top">
                <view class="close" @click="closeMask">关闭</view>
                <view class="search">
                    <image src="@/static/approval/look.png" mode=""></image>
                    <input type="text" v-model="searchValue" @input="searchData"  placeholder="请输入搜索关键词">
                </view>
                <view class="searchText" @click="searchData"></view>
            </view>
            <!-- 客资来源历史搜索 -->
            <view class="searchHistory" v-if="sourceAccHistoryList.length && filterType == 'sourceAccount'">
               <view class="text">历史搜索</view>
               <view class="historyList">
                   <view class="historyItem" v-for="(item,index) in sourceAccHistoryList" :key="index" @click="selectHistory(item)">{{item.title}}</view>
               </view>
            </view>
            <!-- 客资账户历史搜索 -->
            <view class="searchHistory" v-if="accountHistoryList.length && filterType == 'account'">
               <view class="text">历史搜索</view>
               <view class="historyList">
                   <view class="historyItem" v-for="(item,index) in accountHistoryList" :key="index" @click="selectHistory(item)">{{item.title}}</view>
               </view>
            </view>
            <!-- 酒店历史搜索 -->
            <view class="searchHistory" v-if="hotelHistoryList.length && filterType == 'hotel'">
               <view class="text">历史搜索</view>
               <view class="historyList">
                   <view class="historyItem" v-for="(item,index) in hotelHistoryList" :key="index" @click="selectHistory(item)">{{item.title}}</view>
               </view>
            </view>
            <view class="dataList" v-if="!searchValue">
                <view v-for="(item,index) in dataList" :key="index" class="list">
                     <view class="item" @click="selectAccount(item,false)">{{item.title}}</view>
                </view>
            </view>
            <view class="dataList" v-if="searchValue">
                <view v-for="(item,index) in searchList" :key="index" class="list">
                     <view class="item" @click="selectAccount(item,true)">{{item.title}}</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    name:'filter-mask',
    props: {
       parent: {},
       showFilter:{
           type: Boolean,
           default() {
				return false;
			}
       },
       dataList:{
           type: Array,
           default() {
				return [];
			}
       },
     //    是否是客资编辑页
       isCustomerEdit:{
            type: Boolean,
            default() {
                return false;
            }
       },
       filterType: '',
    },
    // 监听搜索弹窗显示
    watch: {
        showFilter: {
            handler(newVal) {
                if(newVal == true){
                    let sourceAccHistory = JSON.parse(localStorage.getItem('sourceAccHistory'));
                    let accountHistory = JSON.parse(localStorage.getItem('accountHistory'));
                    let hotelHistory = JSON.parse(localStorage.getItem('hotelHistory'));
                    if(this.filterType == 'sourceAccount' && sourceAccHistory){
                        this.sourceAccHistoryList = sourceAccHistory;
                    }else if(this.filterType == 'account' && accountHistory){
                        this.accountHistoryList = accountHistory;
                    }else if(this.filterType == 'hotel' && hotelHistory){
                        this.hotelHistoryList = hotelHistory;
                    }
                }
            },
            deep: true
        }
    },        
    data(){
       return{
          searchValue: '', //搜索框输入值
          searchList:[],
          sourceAccHistoryList:[],
          accountHistoryList:[],
          hotelHistoryList:[] 
       }
    },
    created(){
       
    },
    methods:{
        // 输入框实时搜索
         searchData(){
            // console.log(this.searchValue)
            let newArr = [];
            let keyWords = this.searchValue.toLowerCase();
            if(keyWords != ''){
                newArr = this.dataList.filter(function(value) {return value.title.toLowerCase().match(keyWords);});
                this.searchList = newArr;
            }
            if(!this.searchList.length){
                uni.showToast({
                    icon: "none",
                    title: "暂时没有你想要的内容哦~",
                })
            }
         },
        //  关闭
        closeMask(){
            this.parent.showFilter = false;
            this.searchValue = '';
            this.searchList = [];
            this.parent.dataList = [];
        },
        // 选择账户
        selectAccount(row,isSearch){
           if(this.filterType == 'sourceAccount'){
               this.parent.customerData.id = row.id;
               this.parent.customerData.value = row.title;
               //如果是搜索的  缓存搜索记录    
               if(isSearch){
                   if(!this.sourceAccHistoryList.length){
                        this.sourceAccHistoryList.unshift(row);
                    }else{
                        let index = JSON.stringify(this.sourceAccHistoryList).indexOf(row.title);
                        if(index == -1){
                            this.sourceAccHistoryList.unshift(row);
                        }
                        if(this.sourceAccHistoryList.length>5){
                                this.sourceAccHistoryList.splice(5);
                            }
                    }
                    localStorage.setItem('sourceAccHistory',JSON.stringify(this.sourceAccHistoryList));
               }
               this.parent.filterAccountMes();
           }else if(this.filterType == 'account'){
               this.parent.accountTitle = row.title;
               this.parent.account_id = row.id;
               if(isSearch){
                    if(!this.accountHistoryList.length){
                        this.accountHistoryList.unshift(row);
                    }else{
                        let index = JSON.stringify(this.accountHistoryList).indexOf(row.title);
                        if(index == -1){
                            this.accountHistoryList.unshift(row);
                        }
                        if(this.accountHistoryList.length>5){
                                this.accountHistoryList.splice(5);
                            }
                    }
                    localStorage.setItem('accountHistory',JSON.stringify(this.accountHistoryList));
               }
               
           }else if(this.filterType == 'hotel'){
                // 客资编辑页面
                if(this.isCustomerEdit){
                    this.parent.detilData.hotel_text.push(row.title);
                }else{
                    //添加客资页
                  this.parent.holetData.id = row.id;
                  this.parent.holetData.value = row.title;
                }
                if(isSearch){
                    if(!this.hotelHistoryList.length){
                      this.hotelHistoryList.unshift(row);
                    }else{
                        let index = JSON.stringify(this.hotelHistoryList).indexOf(row.title);
                        if(index == -1){
                            this.hotelHistoryList.unshift(row);
                        }
                        if(this.hotelHistoryList.length>5){
                            this.hotelHistoryList.splice(5);
                        }
                    }
                    localStorage.setItem('hotelHistory',JSON.stringify(this.hotelHistoryList));
                }
           }
           
           this.parent.showFilter = false;
           this.searchValue = '';
           this.searchList = '';
           if(!this.isCustomerEdit){
              this.parent.dataList = [];
           }
        },
        // 选择历史记录
        selectHistory(row){
            if(this.filterType == 'sourceAccount'){
                this.parent.customerData.id = row.id;
                this.parent.customerData.value = row.title;
                this.parent.filterAccountMes();
            }else if(this.filterType == 'account'){
                this.parent.accountTitle = row.title;
                this.parent.account_id = row.id;
            }else if(this.filterType == 'hotel'){
                if(this.isCustomerEdit){
                  this.parent.detilData.hotel_text.push(row.title);
                }else{
                  this.parent.holetData.id = row.id;
                  this.parent.holetData.value = row.title;
                }
            }
            this.parent.showFilter = false;
        }
    }
}
</script>
<style lang="less">
    .mask{
        position: fixed;
        z-index: 9999;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.5);
        padding-top: 60px;
        box-sizing: border-box;
        .content{
          z-index: 9999;
          width: 100%;
          height: 100%;
          background: #fff;
          .top{
              width: 100%;
              display: flex;
              flex-wrap: nowrap;
              justify-content: space-between;
              padding: 10px 20px;
              box-sizing: border-box;
            //   margin-bottom: 20px;
              .close{
                  height: 25px;
                  line-height: 25px;
                  font-size: 14px;
                  color: rgba(64,108,235,1);
              }
              .search{
                  width: 80%;
                  height: 25px;
                  background: #F1F1F1;
                  border-radius: 15px;
                  padding: 5px 10px;
                  box-sizing: border-box;
                  display: flex;
                  image{
                      width: 15px;
                      height: 15px;
                      display: block;
                      vertical-align: center;
                      margin-right: 10px;
                  }
                  input{
                    width: 100%;
                    height: 100%;
                    font-size: 12px;
                    padding-left: 10px;
                    box-sizing: border-box;
                  }
              }
              .searchText{
                  font-size: 15px;
                  color: #646566;
              }
          }
          .searchHistory{
              width: 100%;
              padding: 0 20px;
              box-sizing: border-box;
              margin-top: 10px;
              .text{
                  width: 90px;
                  height: 20px;
                  font-size: 14px;
                  line-height: 20px;
                  color: #6c6d6d;
                  margin-bottom: 10px;
              }
              .historyList{
                  display: flex;
                  flex-wrap: wrap;
                  font-size: 12px;
                  color: #6c6d6d;
                  border-bottom: 1px solid rgba(235, 237, 240, 0.5);
                  .historyItem{
                      margin-right: 20px;
                      margin-bottom: 10px;
                      padding: 2px 5px;
                      background: #cbccce;
                      border-radius: 12px;
                      color: #6c6d6d;
                  }
              }
          }
          .empty{
              width: 100%;
              text-align: center;
              font-size: 14px;
              color: #646566;
          }
        }
        .dataList{
            padding: 20px 20px 80px 20px;
            box-sizing: border-box;
            height: 100%;
            overflow: scroll;
            .list{
                width: 100%;
                height: auto;
                padding: 10px 0;
                box-sizing: border-box;
                font-size: 14px;
                color: #646566;
                border-bottom: 1px solid rgba(235, 237, 240, 0.5);
                
            }
        }
    }
</style>